<template>
	<view>
		<!--service/focus/focus.wxml-->
		<view class="focus">
			<view class="top-box z-flex-x-s-a" style="background-color: #FFF;">
				<!-- <van-tabs active="{{ active }}" color='#62CB81' title-inactive-color='#999' @change="onChange">
		  <van-tab title="服务人员">
		
		  </van-tab>
		  <van-tab title="服务项目">
		
		  </van-tab>
		  <van-tab title="店铺">
		
		  </van-tab>
		</van-tabs> -->
				<u-tabs
				:current="active"
					:list="cate"
					keyName="name"
					lineWidth="40"
					lineColor="#62CB81"
					@change="onChange"
					:activeStyle="{
						color: '#5A5A5B',
						fontWeight: 'bold'
					}"
					:inactiveStyle="{
						color: '#A4A9B7',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 30px; padding-right:30px; height: 34px;margin-top:12rpx;"
				></u-tabs>
			</view>
			<view class="main-box">
				<scroll-view scroll-y class="scroll-box z-padding-32" :show-scrollbar="false" enhanced="true" @scrolltolower="lowerthreshold">
					<block v-for="(item,index) in list" v-if="active == 0">
						<skill :info="item" @skillTap="skillTap" @appoint="skillTap"></skill>
					</block>
					<block v-for="(item,index) in list" v-if="active == 1">
						<service :info="item" :type="2" @serviceTap="serviceTap"></service>
					</block>
					<block v-for="(item,index) in list" v-if="active == 2">
						<shop :info="item" @shopTap="shopTap"></shop>
					</block>
					<!-- <van-empty description="暂无地址" v-if="{{finish && list.length === 0}}" /> -->
					<u-empty v-if="finish && list.length === 0" mode="" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../utils/http';
import skill from '@/component/skill.vue';
import service from '@/component/service.vue';
import shop from '@/component/shop.vue';
export default {
	components:{
		skill,service,shop
	},
	data() {
		return {
			cate: [
				{ name: '服务人员' },
				{ name: '服务项目' },
				{ name: '店铺' }
			],
			list:[],
			active: 0
		};
	},
	onLoad(options) {
		this.active = Number(options.active)
		uni.setNavigationBarTitle({
			title: options.name || '详情'
		});
		this.reload();
	},
	methods: {
		shopTap(e) {
			this.util.skip('/service/shopdetail/shopdetail?shop_id=' + e.detail.id);
		},
		//跳转服务者详情
		skillTap(e) {
			this.util.skip('/service/skilldetail/skilldetail?skill_id=' + e.detail.id);
		},
		serviceTap(e) {
			this.util.skip('/service/servedetail/servedetail?id=' + e.detail.id);
		},
		onChange(e) {
			this.active = e.index
			this.reload();
		},
		reload() {
			this.list = [],
			this.page = 1,
			this.finish = false
			this.getList();
		},

		getList() {
			if (this.finish) {
				return;
			}
			if (this.loading) {
				return;
			}
			this.loading = true
			http.get('follow/getlist', {
				type: this.active,
				page: this.page,
				lng: uni.getStorageSync('address').lng,
				lat: uni.getStorageSync('address').lat
			})
				.then((res) => {
					if (res.data.length === 0) {
						this.finish = true
					}

					let arr = this.list.concat(res.data);
					this.list = arr
				})
				.finally((res) => {
					this.loading = false
				});
		}
	}
};
</script>

<style>
	page {
		background:#EDF1F4;
	}
.focus {
	height: 100vh;
	display: flex;
	flex-direction: column;
}
.top-box {
	flex-shrink: 0;
}
.main-box {
	flex: 1;
	overflow: hidden;
}
.scroll-box {
	height: 100%;
	box-sizing: border-box;
}
</style>
